import React from 'react';
import { ListView } from 'weaver-mobile';
import { observer, inject } from 'mobx-react';
import { Card } from 'weaver-mobile';
import { Fillinfrequency, Submissionauthority } from './contants';
import ActivityIndicator from '../../../common/activity-indicator';
import { Tools } from 'weaver-mobile';
const getLabel = Tools.getLabel;
const fillinFrequencyNames = Fillinfrequency();
const submissionauthorityNames = Submissionauthority();

@inject('writeStore')
@observer
export default class NoFilledListView extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.writeStore;
    this.state = { timeSign: '' };
  }

  componentDidMount() {
    const timeSign = new Date().getTime();

    this.setState({ timeSign });

    if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('registerBroadcast')) {
      window.em.registerBroadcast({
        'name': `edcMobileFill_${timeSign}`,
        'action': () => {
          this.store.init();
        }
      })
    }
  }

  renderFooter = () => {
    const { noFillLoading } = this.store;

    if (noFillLoading) {
      return <ActivityIndicator />
    } else  {
      return (
        <div class="wm-list-view-page-modal-nomore">
          <span class="wm-list-view-page-modal-nomore-line-left"></span>
          <span class="wm-list-view-page-modal-nomore-line-name">{getLabel(390064, '没有更多啦')}</span>
          <span class="wm-list-view-page-modal-nomore-line-right"></span>
        </div>
      )
    }
  }

  renderRow = (datas) => {
    if (!datas) return null;

    const { name, createdate, createtime, creator, fillinfrequency, submissionauthority, shortkey } = datas;

    let url = `/edc/formview/${shortkey}`;
    let target = '_blank';
    const backBtnAble = window.backBtnAble;

    if (backBtnAble) { //判断是否在em7中打开，添加返回按钮 
      target = '_self';
    }

    return (
      <div className='edc-write-item'>
        <a onClick={() => this.goto(url, target)}>
          <Card>
            <Card.Header title={name} />
            <div className='main'>
              <div className='text'>
                <div>{creator}</div>
                <div>{createdate} {createtime}</div>
              </div>
              <div className='status'>
                {getLabel(526992,'收集中')}
              </div>
            </div>
            <div className='item-footer'>
              <span>{submissionauthorityNames[submissionauthority]}</span>
              <span>{fillinFrequencyNames[fillinfrequency]}</span>
            </div>
          </Card>
        </a>
      </div>
    );
  }

  goto = (url, target) => {
    const { timeSign } = this.state;

    if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('openLink')) {
      url += `?registerSign=${timeSign}`;
      
      window.em.openLink({
        url: url,
        openType: 2,
        sysId: window.localStorage.emobile_ec_id,
      });
    } else if (target === '_blank') {
      window.open(url);
    } else {
      url += '?backBtnAble=true';

      window.location.href = url;
    }
  }

  render() {
    const { noFilledData, onEndReached } = this.store;

    return (
      <ListView 
        dataSource={noFilledData}
        renderRow={this.renderRow}
        renderFooter={this.renderFooter}
        onEndReached={onEndReached}
        initialListSize={20}
        onEndReachedThreshold={20}
        style={{
          height: '100%',
          overflow: 'auto',
        }}
      />
    )
  }
}